<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>验证码查询</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 注意：项目正式环境请勿引用该地址 -->
  <link href="https://cdn.staticfile.org/layui/2.6.9/css/layui.css" rel="stylesheet">
  <style>
    /* body {
      background-color:#f9f6ef;
    }， */
    .outstideDiv {        
        padding: 0;        
    }
    </style>
</head>
<body style="background-color:#f9f6ef">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->  
  <script>
    function PersonInfo(name,number){
      this.name=name;
      this.number=number;
    }

    // 添加数据
    var personArray=new Array();
    personArray.push(new PersonInfo("a1","123123"));
    personArray.push(new PersonInfo("你好","3444"));
    personArray.push(new PersonInfo("测试","1231556623"));
    // console.log(personArray[0].number);

    function confirm(){
      var contentText = document.getElementById("textContent");
      var nameRe="";
      var numberRe="";
      // console.log(contentText.value);
      personArray.forEach(item => {
        if (item.name===contentText.value){
          nameRe=item.name;
          numberRe=item.number;
        }
      });
      if(nameRe!=""&& numberRe!=""){
        document.getElementById("number").innerHTML="您的姓名： "+nameRe+" ,您的验证码： "+numberRe+" 。"
      }
      else{
        document.getElementById("number").innerHTML="";
        alert("未找到对应信息，请检查您的输入！");
      }

    }
  </script>
  <div class="outstideDiv">
    <div class="layui-row">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
          <div style="padding: 10px;">
            <input type="text" name="title" id="textContent"  placeholder="请输入姓名" class="layui-input">
          </div>
      </div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        <div  style="padding: 10px;">
          <button type="button" class="layui-btn layui-btn-normal" onclick="confirm()">查询</button>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        <div style="padding: 10px;">
          <div class="layui-panel">
            <div style="padding: 10px 0;">
              <p style="padding: 10px;">您的验证码：</p>
              <p id="number" style="padding: 10px;"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
  

</html>

